<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动计算</title>
</head>
<body>
<div >
    <div>
        aa <input x="a" oninput="inputSUM(this)" onkeyup="sum(this)"> bb <input x="b" oninput="inputSUM(this)"> cc<input x="c" oninput="inputSUM(this)"> dd<input x="d" oninput="inputSUM(this)"><button onclick="add(this)">+</button>
    </div>
</div>

</div>
<div>
    aa<span id="a"></span>
    bb<span id="b"></span>
    cc<span id="c"></span>
    cc<span id="d"></span>
</div>
<script src="http://itphy.com/cdn/jquery/jquery.js"></script>
<script src="http://itphy.com/cdn/common/common.js"></script>
<script id="add" type="text/html">
    <div>
        <input x="a" oninput="inputSUM(this)"><input x="b" oninput="inputSUM(this)"><input x="b" oninput="inputSUM(this)"> <button onclick="add(this)">+</button>
    </div>
</script>
<script>
    var a={
    };
    function inputSUM(v){
        var id=$(v).attr("x")
        if(a[id]==undefined){
            a[id]={}
        }
        if(a[id].set==undefined){
            a[id].set=new Set();
            a[id].count=0;
            $("#"+id).bind(a[id],function (v,t){
                var sum=0;
                for (var x of a[id].set) {
                    sum=$.Math.accAdd(sum,$(x).val())
                }
                $(t).html(sum)
            })
        }
        a[id].set.add(v);
        a[id].count++;
    }
</script>
</body>
</html>